<!--
  富文本
-->
<script setup lang="ts">
import { ref, computed } from 'vue'
import { getShowRoomPage, addShowRoom, updateShowRoom, deleteShowRoom } from '@/api/interface/showroom'
import { throttle } from '@/utils/system'
import { ElMessage, ElMessageBox } from 'element-plus'
import ShowroomForm from '@/components/business-form/showroom/ShowroomForm.vue'
import { api as viewerApi } from 'v-viewer'
import 'viewerjs/dist/viewer.css'
import { getShowRoom } from '@/api/interface/showroom'

const fullscreenLoading = ref(false)

const baseTableRef = ref()

const searchForm = ref<any>({})

const conditionMethod = () => {
  const cond: any = {}
  Object.keys(searchForm.value).map((key) => {
    if (searchForm.value[key] || searchForm.value[key] === 0) {
      if (key === 'rangeDate') {
        if (searchForm.value[key].length) {
          cond['startTime'] = searchForm.value[key][0]
          cond['endTime'] = searchForm.value[key][1]
        }
      } else {
        cond[key] = searchForm.value[key]
      }
    }
  })
  return cond
}

const handleSearch = () => {
  baseTableRef.value.refresh()
}

const handleResetSearch = () => {
  searchForm.value = {}
  baseTableRef.value.refresh()
}

const bannerTitle = computed(() => {
  const titleObj: any = {
    add: '新增展厅介绍',
    edit: '编辑展厅介绍',
    read: '查看展厅介绍'
  }
  return titleObj[bannerStatus.value]
})
const bannerVisible = ref(false)
const bannerStatus = ref('add')

const bannerFormRef = ref()

const curItem = ref<any>(null)

const handleAdd = () => {
  bannerStatus.value = 'add'
  curItem.value = null
  bannerVisible.value = true
}

const handleEdit = (row: any) => {
  fullscreenLoading.value = true
  getShowRoom({ id: row.id })
    .then((res: any) => {
      bannerStatus.value = 'edit'
      curItem.value = res
      bannerVisible.value = true
    })
    .finally(() => {
      fullscreenLoading.value = false
    })
}

const handleDetail = (row: any) => {
  fullscreenLoading.value = true
  getShowRoom({ id: row.id })
    .then((res: any) => {
      bannerStatus.value = 'read'
      curItem.value = res
      bannerVisible.value = true
    })
    .finally(() => {
      fullscreenLoading.value = false
    })
}

const handleDrawerClose = () => {
  bannerVisible.value = false
}

const handleSubmit = throttle(() => {
  bannerFormRef.value.submitForm().then((data: any) => {
    if (data) {
      fullscreenLoading.value = true
      if (bannerStatus.value === 'add') {
        addShowRoom(data)
          .then(() => {
            ElMessage({
              message: '新增成功!',
              type: 'success'
            })
            bannerVisible.value = false
            baseTableRef.value.refresh()
          })
          .finally(() => {
            fullscreenLoading.value = false
          })
      } else if (bannerStatus.value === 'edit') {
        updateShowRoom(data)
          .then(() => {
            ElMessage({
              message: '更新成功!',
              type: 'success'
            })
            bannerVisible.value = false
            baseTableRef.value.refresh()
          })
          .finally(() => {
            fullscreenLoading.value = false
          })
      }
    }
  })
})

const handleDelete = (row: any) => {
  ElMessageBox.confirm('您确定要删除此展厅吗,删除后不可恢复,请慎重操作?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    autofocus: false
  }).then(() => {
    fullscreenLoading.value = true
    deleteShowRoom({ id: row.id })
      .then(() => {
        ElMessage({
          message: '删除成功!',
          type: 'success'
        })
        baseTableRef.value.refreshStay()
      })
      .finally(() => {
        fullscreenLoading.value = false
      })
  })
}

// 播放音频相关
let curAudio: any = null
const handleAudioPlay = (e: any) => {
  if (curAudio && curAudio.dataset.aid !== e.target.dataset.aid) {
    // 存在正在播放的音频
    curAudio.pause()
  }
  curAudio = e.target
}

const handleFormAudioPlay = () => {
  if (curAudio) {
    curAudio.pause()
  }
}

const previewImg = (url: string) => {
  if (url) {
    viewerApi({
      images: [url],
      options: {
        zIndex: 9999
      }
    })
  }
}
</script>

<template>
  <BasePage v-loading.fullscreen="fullscreenLoading" intitle>
    <template #intitle>富文本编辑器</template>
    <template #searchbar>
      <el-form :inline="true" :model="searchForm">
        <el-form-item>
          <el-input v-model="searchForm.keywords" placeholder="请输入标题搜索" />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="searchForm.rangeDate"
            type="daterange"
            range-separator="-"
            value-format="YYYY-MM-DD HH:mm:ss"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="info" text bg @click="handleResetSearch">
            <template #icon>
              <SvgIcon icon="plain-reset"></SvgIcon>
            </template>
            重置
          </el-button>
          <el-button type="primary" @click="handleSearch">
            <template #icon>
              <SvgIcon icon="plain-search"></SvgIcon>
            </template>
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </template>
    <template #toolbar>
      <el-button type="primary" @click="handleAdd">
        <template #icon>
          <SvgIcon icon="plain-add"></SvgIcon>
        </template>
        新增
      </el-button>
    </template>
    <BaseTable ref="baseTableRef" :init-table-method="getShowRoomPage" :condition-method="conditionMethod">
      <el-table-column prop="showRoomName" label="展厅名称" show-overflow-tooltip></el-table-column>
      <el-table-column prop="otherName" label="展厅别名" min-width="100" show-overflow-tooltip></el-table-column>
      <el-table-column prop="imageUrl" label="图片地址" min-width="100" show-overflow-tooltip>
        <template #default="scope">
          <el-image style="width: 60px; height: 60px; cursor: pointer" :src="scope.row.imageUrl" fit="cover" @click="previewImg(scope.row.imageUrl)" />
        </template>
      </el-table-column>
      <el-table-column prop="audioUrl" label="音频地址" min-width="150">
        <template #default="scope">
          <audio :src="scope.row.audioUrl" controls :data-aid="scope.row.id" @play="handleAudioPlay"></audio>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="220">
        <template #default="scope">
          <el-button type="success" link @click="handleDetail(scope.row)">查看</el-button>
          <el-button type="primary" link @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </BaseTable>
  </BasePage>
  <BaseDrawer v-model="bannerVisible">
    <template #title>{{ bannerTitle }}</template>
    <template #footer>
      <el-button type="info" text bg @click="handleDrawerClose">取消</el-button>
      <el-button v-if="bannerStatus != 'read'" type="primary" @click="handleSubmit">确认</el-button>
    </template>
    <ShowroomForm ref="bannerFormRef" :data="curItem" :status="bannerStatus" @audio-play="handleFormAudioPlay"></ShowroomForm>
  </BaseDrawer>
</template>

<style lang="scss" scoped>
.upshow-container {
  @include rect(100%, auto);
  box-sizing: border-box;
  padding: 0 32px;
  :deep(.el-tabs__header) {
    margin: 0;
    .el-tabs__nav-wrap::after {
      background-color: rgba(255, 255, 255, 0);
    }
  }
}
</style>
